<template>
  <el-aside
    width="14.5%"
    height="100%"
    style="background-color: rgb(238, 241, 246);min-width:285px"
    class="siderBar"
  >
    <div class="userInfo">
      <div class="userAvatar">
        <img :src="user.userAvater" alt="用户头像" />
      </div>
      <div class="userDetail">
        <p class="userName">{{ user.userName }}</p>
        <p class="userHotel">{{ user.userHotel }}</p>
        <div class="nowTime">
          <p class="nowDate">
            {{ nowDate[0] }}年{{ nowDate[1] }}月{{ nowDate[2] }}日
            <br>
          </p>
          <p class="actTime">{{ time }}</p>
        </div>
      </div>
    </div>
    <el-menu
      active-text-color="#409EFF"
      :default-openeds="['6']"
      style="height:auto"
      :router="true"
    >
      <el-menu-item index="1" route="/home">
        <i class="el-icon-user-solid"></i>用户中心
      </el-menu-item>
      <el-menu-item index="2" route="/getorder">
        <i class="el-icon-tickets"></i>订单查看
      </el-menu-item>
      <el-menu-item index="3" route="/updata">
        <i class="el-icon-upload"></i>资料更新
      </el-menu-item>
      <el-menu-item index="4" route="/roommanage">
        <i class="el-icon-house"></i>入住管理
      </el-menu-item>
      <el-menu-item index="5" route="/package">
        <i class="el-icon-s-finance"></i>余额提现
      </el-menu-item>

      <el-submenu index="6">
        <span slot="title" style="font-size: 17.85px" >服务中心</span>
        <el-menu-item index="6-1" route="/formreport">
          <i class="el-icon-phone"></i>维修上报
        </el-menu-item>
        <el-menu-item index="6-2" route="/gethelp">
          <i class="el-icon-s-platform"></i>技术支持
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: "siderbar",
  data() {
    return {
      user: {
        userName: "姓名",
        userHotel: "酒店名称",
        userAvater:
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        userID: "",
      },
      date: new Date().toLocaleDateString(),
      time: new Date().getHours() + "时" + new Date().getMinutes() + "分"+new Date().getSeconds() + "秒",
    };
  },
  computed: {
    nowDate() {
      return this.date.split("/");
    },
  },
  created(){
      setInterval(()=>{
          this.time=new Date().getHours() + "时" + new Date().getMinutes() + "分"+ new Date().getSeconds() + "秒"
      },1000)
  }
};
</script>
<style scoped>

.userInfo {
  display: flex;
  box-sizing: border-box;
  margin-top: 12px;
  height: auto;
  padding: 12.5px;
  padding: 10px;
}
.userAvatar {
  box-sizing: border-box;
  margin-left: 10px;
  width: 100px;
  height: 100px;
  padding-right: 20px;
}
.userAvatar img {
  height: auto;
  width: 100%;
  border-radius: 30px;
}
.nowTime{
    font-size: 60%;
    text-align: center;
}
.userDetail{
    text-align: center;
    box-sizing: border-box;
    margin-top: 14px;
}
.userName,.userHotel{
    font-size: 80%;
    font-weight: bolder;
}
.userInfo p{
    padding: 0;
    margin: 0;
}
</style>